<!DOCTYPE html>
<html>
<head>
<style>
	body { margin:0; font:20px 'Trebuchet MS'; color:white; }
	.clearfix { zoom:1; overflow:hidden; }
	.container { width:100px; float:left; background:wheat; }
	.legend { width:100px; height:100px; float:left; margin-right:5px; background-image:url(bg.gif); line-height:100px; text-align:center; color:wheat; }
	.legend span { border:3px solid navy; }
</style>
</head>
<body>
<div id="d" class="clearfix">
	<div class="legend"><span>LEGEND</span></div>
	<div class="container">
		<span style="background-image:url(bg.gif); display:inline-block;">ABCDEF<br />GHIJKL<br />MNOPQR<br />STUVWXYZ</span>
	</div>
</div>
</body>
</html>